<template>
  <div class="userinfo-page">
    <div class="mains">
      <input
        style="display: none"
        type="file"
        id="upload"
        accept="image/png, image/jpeg"
        required
        @change="fileChange"
      />
      <n-tabs default-value="账号设置" type="line">
        <n-tab-pane name="账号设置" tab="账号设置">
          <div class="enum">
            <div class="cell flex align-center">
              <div class="label">头像</div>
              <div class="value">
                <div class="avatar" @click="handAvatar">
                  <img class="avatar-img" :src="userInfo.avatar" alt="" />
                  <div class="upd">修改头像</div>
                </div>
              </div>
            </div>
            <div class="cell flex align-center">
              <div class="label">账号ID</div>
              <div class="value">
                <span>{{ userInfo.id }}</span>
              </div>
            </div>
            <div class="cell flex align-center">
              <div class="label">昵称</div>
              <div class="value">
                <span>{{ userInfo.nickname }}</span>
                <span class="edit" @click="handName">编辑</span>
              </div>
            </div>
            <div class="cell flex align-center">
              <div class="label">邮箱</div>
              <div class="value">
                <span>{{ userInfo.email }}</span>
                <span class="edit" @click="handPhone">修改</span>
              </div>
            </div>
            <!--            <div class="cell flex align-center">-->
            <!--              <div class="label">支付宝</div>-->
            <!--              <div class="value">-->
            <!--                <span>{{ userInfo.alipayAccount || '未绑定' }}</span>-->
            <!--                <span class="edit" @click="handAli">-->
            <!--                  {{ userInfo.alipayAccount ? '修改' : '绑定' }}-->
            <!--                </span>-->
            <!--              </div>-->
            <!--            </div>-->
          </div>
        </n-tab-pane>
      </n-tabs>
    </div>
    <upd-avatar ref="avatarRef" @success="avatarChange" />
    <upd-name ref="nameRef" @success="doUserInfo" />
    <upd-phone ref="phoneRef" @success="doUserInfo" />
    <!--    <upd-ali-account-->
    <!--      ref="aliRef"-->
    <!--      :cellphone="userInfo.cellphone"-->
    <!--      @success="doUserInfo"-->
    <!--    />-->
  </div>
</template>
<script setup lang="ts">
import { defineAsyncComponent, ref } from 'vue'
import { NTabPane, NTabs } from 'naive-ui'
import { useAppsStore } from '@/stores/modules/app'
import { storeToRefs } from 'pinia'
import loginApi from '@/service/api/login'
const UpdAvatar = defineAsyncComponent(
  () => import('@/views/my/page/info/components/UpdAvatar.vue')
)
const UpdName = defineAsyncComponent(
  () => import('@/views/my/page/info/components/UpdName.vue')
)
const UpdPhone = defineAsyncComponent(
  () => import('@/views/my/page/info/components/UpdPhone.vue')
)
// const UpdAliAccount = defineAsyncComponent(
//   () => import('@/views/my/page/info/components/UpdAliAccount.vue')
// )
const useStore = useAppsStore()
const { getUserInfo: userInfo } = storeToRefs(useStore)
const { doUserInfo } = useStore
const handAvatar = () => {
  // 本地选择图片
  document.getElementById('upload')?.click()
}
const avatarRef = ref()
const fileChange = (e: any) => {
  const file = e.target.files[0]
  avatarRef.value.open(file)
}
const avatarChange = async (avatar: string) => {
  const { code, msg } = await loginApi.doUpdInfo({ avatar })
  if (code !== 0) {
    msgUtil.$message.error(msg)
    return
  }
  msgUtil.$message.success('修改成功')
  doUserInfo()
}

const nameRef = ref()
const handName = () => {
  nameRef.value?.open()
}

const phoneRef = ref()
const handPhone = () => {
  phoneRef.value?.open()
}

// const aliRef = ref()
// const handAli = () => {
//   aliRef.value?.open()
// }
</script>

<style scoped lang="scss">
.userinfo-page {
  .mains {
    min-height: 1420px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eeeeee;
    box-sizing: border-box;
    padding: 15px 24px;
  }
  .enum {
    margin-top: 26px;
    .cell {
      padding: 20px 0;
      .label {
        width: 110px;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
      }
      .value {
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        .edit {
          margin-left: 24px;
          color: #f1423d;
          cursor: pointer;
        }
        .avatar {
          cursor: pointer;
          width: 82px;
          height: 82px;
          border-radius: 50%;
          overflow: hidden;
          position: relative;
          .avatar-img {
            width: 82px;
            height: 82px;
            border-radius: 50%;
            display: block;
            object-fit: cover;
          }
          .upd {
            position: absolute;
            bottom: 0px;
            left: 0;
            font-size: 11px;
            font-weight: 400;
            color: #ffffff;
            width: 100%;
            padding: 3px 0 7px 0;
            background: rgba(0, 0, 0, 0.5);
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
